<template>
	<div class="c2c">
		<!-- 头部导航 -->
		<div class="c2c-header">
			<!-- 左侧导航 -->
			<div>
				<el-menu mode="horizontal" :ellipsis="false"
				class="el-menu-left"
				:default-active="activeIndex"
				active-text-color="#000000"
				background-color="#ffffff"
				@select="handleSelect"
				>
					<el-menu-item index="transaction/c2c/quick" :class="isActive('transaction/c2c/quick') ? 'is-active' : ''">
						<i class="el-icon-message"></i>
						<span slot="title">快捷区</span>
					</el-menu-item>
					<el-menu-item index="transaction/c2c/optional" :class="isActive('transaction/c2c/optional') ? 'is-active' : ''">
						<i class="el-icon-message"></i>
						<span slot="title">自选区</span>
					</el-menu-item>
				</el-menu>
			</div>
			<!-- 右侧导航 -->
			<div>
				<el-menu mode="horizontal" :ellipsis="false" class="el-menu-right"
				:default-active="activeIndex"
				active-text-color="#000000"
				background-color="#ffffff"
				@select="handleSelect"
				>
					<el-menu-item index="transaction/c2c/order"
					:class="isActive('transaction/c2c/order') ? 'is-active' : ''">
						<i class="el-icon-message"></i>
						<span slot="title">订单</span>
					</el-menu-item>
					<el-menu-item index="transaction/c2c/c2cPersonal"
					:class="isActive('transaction/c2c/c2cPersonal') ? 'is-active' : ''">
						<i class="el-icon-message"></i>
						<span slot="title">个人中心</span>
					</el-menu-item>
					<el-sub-menu index="transaction/c2c/c2cMore"
					:class="isActive('transaction/c2c/c2cMore') ? 'is-active' : ''"
					popper-class="popper-box-c2c">
						<template #title>更多</template>
						<el-menu-item index="advertising"
						:class="isActive('transaction/c2c/c2cMore/advertising') ? 'is-active' : ''">
						<template #default>
							<div class="flex items-center">
								<img src="/transaction/c2c/c2cMore/more-1.svg" alt="">
								<p class="ml-10px">发布新广告</p>
							</div>
						</template>
						</el-menu-item>
						<el-menu-item index="personalPayment"
						:class="isActive('transaction/c2c/c2cMore/personalPayment') ? 'is-active' : ''">
						<template #default>
							<div class="flex items-center">
								<img src="/transaction/c2c/c2cMore/more-2.svg" alt="">
								<p class="ml-10px">支付方式</p>
							</div>
						</template>
						</el-menu-item>
						<el-menu-item index="personalAd"
						:class="isActive('transaction/c2c/c2cMore/personalAd') ? 'is-active' : ''">
						<template #default>
							<div class="flex items-center">
								<img src="/transaction/c2c/c2cMore/more-3.svg" alt="">
								<p class="ml-10px">我的广告</p>
							</div>
						</template>
						</el-menu-item>
					</el-sub-menu>
				</el-menu>
			</div>
			<!-- 背景板 -->
			<div class="c2c-background">
			</div>
		</div>
		<div>
			<router-view></router-view>
		</div>
	</div>
</template>
<script lang="ts" setup>
import {useRoute,useRouter,onBeforeRouteUpdate } from 'vue-router';
import useJump from '@/utils/jump';
const route = useRoute();

const {jumpTo} = useJump();

const activeIndex = ref<string>(route.path);
// 点击导航事件
function handleSelect(key: string, keyPath: string[]) {
	console.log(route.path,keyPath);
	let path = '/' + keyPath.join('/')
	jumpTo(path)
};

// 判断当前路由是否匹配
const isActive = (index:string)=>{
	if(route.path === '/'+index || route.path.includes('/'+index)){
		return true;
	}else{
		return false;
	}
}
// 监听路由变化
onBeforeRouteUpdate((to)=>{
	// console.log(to.path)
	activeIndex.value = to.path;
})
</script>
<style lang="scss" scoped>
.el-menu-left,.el-menu-right{
	border: 0;
}
::v-deep .el-menu--horizontal>.el-menu-item,
::v-deep .el-menu--horizontal>.el-menu-item.is-active{
	border: none;
	text-align: center;
	--el-menu-hover-bg-color: #fff !important;
	font-size: 18px;
}
::v-deep .el-menu--horizontal>.el-sub-menu .el-sub-menu__title{
	font-size: 18px;
}
::v-deep .el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title,
::v-deep .el-menu--horizontal>.el-menu-item.is-active >span{
	border-bottom:2px solid #114CEE;
}

::v-deep .el-menu--horizontal>.el-menu-item .el-icon-message{
	display: none;
}
.c2c {
	.c2c-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20px;
		height: 60px;
		background: #fff;
		position: relative;
		z-index:1;
		.c2c-background {
			position: absolute;
			top: 0;
			left: -9vw;
			height: 100%;
			width: 200vw;
			z-index:-1;
			border-bottom: 1px solid #E5E6EB;
		}
	}
}
</style>
<style lang="scss">
.popper-box-c2c{
	ul{
		padding: 10px;
		li{
			padding: 0;
			margin: 0 !important;
		}
	}
	.el-menu {
		background-color: #fff ;
		border-radius: 4px;
		box-shadow: 0 0 15px rgb(46 51 56 / 20%);

		.el-menu-item {
			height: 50px !important;
			margin-top: 4px;
			margin-bottom: 4px;
			color:#0f0f0f !important;
			background-color: #fff !important;

			&:not(.is-disabled):hover {
				background-color: rgb(219 217 217) !important;
			}
		}
	
	}
}
</style>
